<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <script>
        function previewImage(event) {
            var input = event.target;
            var reader = new FileReader();

            reader.onload = function(){
                var img = document.getElementById("preview");
                img.src = reader.result;
            };

            reader.readAsDataURL(input.files[0]);
        }
    </script>
</head>
<body>
    测试上传文件
    <form method="post" enctype="multipart/form-data" action="/chat/uploads/">
        {% csrf_token %}
        <input type="file" name="pic" onchange="previewImage(event)" accept="image/*"><br/>
        <img id="preview" src="#" alt="预览图片" style="max-width: 200px; max-height: 200px;"><br/>
        <input type="submit" value="上传"><br/>
    </form>
</body>
</html>